import React, { useState, useEffect } from 'react'
import { Space, Button, message, Form, Input, DatePicker } from 'antd'
import XLSX from 'xlsx'
import CustomTable from './components/CustomTable'
import { getList, getAll, add, update, remove } from '../../api/health'
import CustomModal from './components/CustomModal'

export default function Health() {
  // 利用 useState HOOK 定义组件使用到的 state 状态数据
  const [healthList, setHealthList] = useState([])
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(0)
  const [modalVisible, setModalVisible] = useState(false)
  const [modalType, setModalType] = useState('create') // 对话框的作用：create-添加  update-修改
  const [updateData, setUpdateData] = useState({}) // 待修改的数据项

  // componentDidMount()
  useEffect(() => {
    // console.log('loaded............')
    getListByPage()

    // const timer = setInterval(() => console.log('page......'), 1000)

    // componentWillUnmount()
    // return () => {
    //   console.log('destroy..........')
    //   clearInterval(timer)
    // }
  }, [])

  // componentDidMount()/componentDidUpdate()
  // useEffect(() => {
  //   console.log('updated................', page)
  // }, [page])


  // 分页查询列表数据
  async function getListByPage(_page = 1, _pageSize = 5) {
    try {
      // res 中保存了 Promise 处理成功后的数据
      const res = await getList({
        page: _page,
        pageSize: _pageSize
      })
      // 设置状态数据
      setHealthList(res.list)
      setPage(res.page)
      setPageSize(res.pageSize)
      setTotal(res.total)
    } catch (error) {
      console.log('异常：', error)
    }
  }

  // 页码改变，重新查询数据
  const handlePageChange = (_page, _pageSize) => {
    getListByPage(_page, _pageSize)
  }

  // 对话框点击确定按钮，添加或修改数据
  const handleOk = async formValues => {
    console.log('保存：', formValues)
    if (modalType === 'create') {
      const res = await add(formValues)
      // 添加成功后，将添加的数据保存到数据源数组中
      setHealthList([
        res,
        ...healthList
      ])
      message.success('健康数据添加成功！！！')
      // console.log('添加结果：', res)
    } else {
      await update(formValues)
      // 修改成功后，将修改的数据更新到数据源数组中
      // 根据 id 在数据源中匹配数据，更新
      setHealthList(healthList.map(item => {
        if (item.id === formValues.id) {
          return {
            ...item,
            ...formValues
          }
        }
        return item
      }))
      message.success('健康数据更新成功！！！')
      // console.log('修改结果：', res)
    }
    setModalVisible(false)
  }

  // 将健康数据导出成 excel 文件
  const handleExportFile = async () => {
    // 查询出所有需要导出的数据
    const result = await getAll()
    // 表头
    const title = Object.keys(result.list[0])
    // 构建需要导出的数据结构
    const data = [
      title
    ]
    // 添加各行数据到 data
    result.list.forEach(item => {
      data.push(Object.values(item))
    })
    // 工作表，将需要导出的数据放入工作表中
    const ws = XLSX.utils.aoa_to_sheet(data)
    // 工作簿
    const wb = XLSX.utils.book_new()
    // 将工作表追加到工作簿中
    XLSX.utils.book_append_sheet(wb, ws, "健康数据")
		// 将工作簿内容写入文件
		XLSX.writeFile(wb, "students_health.xlsx")
  }

  return (
    <div>
      <Form name="horizontal_login" layout="inline">
        <Form.Item name="name">
          <Input placeholder="请输入搜索姓名" />
        </Form.Item>
        <Form.Item name="stuNo">
          <Input placeholder="请输入学号" />
        </Form.Item>
        <Form.Item name="type">
          <Input placeholder="请输入测量方式" />
        </Form.Item>
        <Form.Item>
          <DatePicker.RangePicker
            showTime={{ format: 'HH:mm' }}
            format="YYYY-MM-DD HH:mm"
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary">搜索</Button>
        </Form.Item>
      </Form>

      <Space>
        <Button type="primary" onClick={() => {
          setModalVisible(true)
          setModalType('create')
        }}>添加</Button>
        <Button onClick={handleExportFile}>导出所有健康数据</Button>
      </Space>

      <CustomTable
        dataSource={healthList}
        page={page}
        pageSize={pageSize}
        total={total}
        onChange={handlePageChange}
        onUpdateClick={data => {
          // data 是需要修改的数据项
          setModalVisible(true)
          setModalType('update')
          // console.log("data:", data)
          // data.symptom = data.symptom.split(',')
          setUpdateData({...data})
          // console.log('data:', data)
        }}
        onDeleteClick={async id => {
          console.log('删除的id:', id)
          // 删除
          await remove(id)
          // 删除成功，更新数据源
          setHealthList(healthList.filter(item => item.id !== id))
        }}
      />

      <CustomModal
        visible={modalVisible}
        onCancel={() => setModalVisible(false)}
        modalType={modalType}
        updateData={updateData}
        onCreate={handleOk}
      />
    </div>
  )
}




// import React, { Component } from 'react'
// import { Space, Button } from 'antd'
// import CustomTable from './components/CustomTable'
// import { getList } from '../../api/health'

// export default class Health extends Component {

//   state = {
//     healthList: [],
//     page: 1,
//     pageSize: 5,
//     total: 0
//   }

//   // 组件挂载后立即调用，发送 ajax 请求数据
//   componentDidMount() {
//     getList({
//       pageSize: this.state.pageSize
//     })
//       .then(res => {
//         this.setState({
//           healthList: res.list,
//           page: res.page,
//           pageSize: res.pageSize,
//           total: res.total
//         })
//       })
//   }

//   render() {
//     return (
//       <div>
//         <Space>
//           <Button type="primary">添加</Button>
//           <Button>导出</Button>
//         </Space>
//         <CustomTable
//           dataSource={this.state.healthList}
//           page={this.state.page}
//           pageSize={this.state.pageSize}
//           total={this.state.total}
//         />
//       </div>
//     )
//   }
// }
